{extend name="pc/common/_base" /}

{block name="title"}
<title>BASE64在线编码/解码-{$website['title']}</title>
{/block}

{block name="keywords"}
<meta name="keywords" content="BASE64编码/解码,{$website['title']}">
{/block}

{block name="description"}
<meta name="description" content="{$website['title']}在线BASE64编码/解码文本操作。">
{/block}

{block name="style"}
<style>
    #cbresultbox {
        width: 100%;
        margin: 30px auto;
    }

    .cbresultlt, .cbresultrt {
        height: 300px;
        background-color: #fff;
        overflow: hidden;
        margin-bottom: 5px;
        float: left;
        -webkit-box-shadow: 0 1px 3px #d5d6d9;
        border-radius: 3px;
    }

    .cbresultlt {
        margin-right: 6px;
    }

    .cbresultlt, .cbresultrt {
        width: 594px;
    }

    .cbresultlt .cbtitle, .cbresultrt .cbtitle {
        height: 60px;
        border-bottom: 1px solid #eaeaea;
    }

    .cbresultrt .cbtitle {

    }

    .cbresultrt .cbtitle .iconfont {
        float: right;
        cursor: pointer;
        font-size: 16px;
    }

    .cbresultlt .cbtitle p, .cbresultrt .cbtitle p {
        float: left;
        color: #565656;
        border: 1px solid #a0edd7;
        background-color: #e2faf3;
        width: 62px;
        height: 30px;
        line-height: 26px;
        text-align: center;
        border-radius: 15px;
        margin-top: 15px;
        font-size: 13px;
        margin-left: 21px;
    }

    .cbresultlt .cbtitle p {
        width: 96px;
    }

    #cbresultbox .cbtrl {
        float: right;
        margin-top: 15px;
        margin-right: 20px;
    }

    #cbresultbox .cbtrl button {
        width: 68px;
        height: 30px;
        line-height: 30px;
        background-color: #00b0fe;
        color: #fff;
        text-align: center;
        border-radius: 15px;
        margin-left: 10px;
        cursor: pointer;
        outline: none;
        border: none;
    }

    .cbresultlt .cbbody textarea, .cbresultrt .cbbody textarea {
        width: 96%;
        height: 180px;
        border: none;
        outline: none;
        color: #777;
        resize: none;
        padding: 10px 12px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .more-row {
        float: left;
        cursor: pointer;
    }

    .more-row .checkbox {
        line-height: 30px;
        margin-top: 0;
    }

    .more-row .more-name {
        height: 30px;
        line-height: 30px;
        margin-left: 4px;
        margin-right: 4px;
    }
</style>
{/block}

{block name="main"}

<div class="editer">

    <div class="container">

        <h1 class="editer-title">BASE64</h1>
        <p class="editer-info">在线BASE64编码/解码</p>

        <div id="cbresultbox" class="clearfix flex">
            <div class="cbresultlt">
                <div class="cbtitle">
                    <p>base64编码</p>
                    <div class="cbtrl">
                        <div class="more-row flex-center" @click="selectCheckbox()">
                            <input type="checkbox" name="chk" class="checkbox" v-model="isChecked">
                            <span class="more-name">&nbsp;多行</span>
                        </div>
                        <button @click="btnEncode()">编码</button>
                        <button @click="btnDecode()">解码</button>
                    </div>
                </div>
                <div class="cbbody">
                    <textarea v-model="content" @input="changeContent()"></textarea>
                </div>
            </div>
            <div class="cbresultrt">
                <div class="cbtitle flex-row-end">
                    <div class="js-clip" :data-text="resContent"><i class="iconfont icon-fuzhi"></i></div>
                    <span class="iconfont icon-shanchu" style="margin-left: 20px;margin-right: 20px;font-size: 20px;" @click="clearText()"></span>
                </div>
                <div class="cbbody">
                    <textarea v-model="resContent"></textarea>
                </div>
            </div>
        </div>

        <div class="recommend-box" style="margin-top: 60px">
            {include file='pc/common/app'}
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="{$moduleAttachUrl}/static/components/jquery/jquery.base64.js"></script>
<script>
    require(['vue', 'jquery', 'clipboard', 'tip'], (Vue, $, Clipboard) => {
        new Vue({
            el: '#cbresultbox',
            data: {
                content: '',
                resContent: '',
                isChecked: false,
            },
            mounted() {
                this.addClipboard();
            },
            methods: {
                addClipboard() {
                    let clipboard = new Clipboard('.js-clip', {
                        text: (e) => {
                            return $(e).data('text')
                        }
                    });
                    clipboard.on('success', function (e) {
                        tip.msgbox.suc('复制成功')
                    })
                },
                changeContent() {
                    this.btnEncode()
                },
                clearText() {
                    this.content = "";
                    this.resContent = "";
                },
                selectCheckbox() {
                    this.isChecked = !this.isChecked;
                },
                btnEncode() {
                    let content = this.content;

                    let baseStr = new Base64();
                    let isChk = this.isChecked;

                    if (isChk) {
                        let snsArr = content.split(/[(\r\n)\r\n]+/);
                        let str = [];
                        for (i = 0; i < snsArr.length; i++) {
                            let value = baseStr.encode(snsArr[i]);
                            str.push(value)
                        }
                        this.resContent = str.join("\n");
                    } else {
                        this.resContent = baseStr.encode(this.content);
                    }
                },
                btnDecode() {
                    let resContent = this.resContent;
                    let baseStr = new Base64();
                    let isChk = this.isChecked;

                    if (isChk) {
                        let snsArr = resContent.split(/[(\r\n)\r\n]+/);
                        let str = [];
                        for (i = 0; i < snsArr.length; i++) {
                            let value = baseStr.decode(snsArr[i]);
                            str.push(value)
                        }
                        this.content = str.join("\n");
                    } else {
                        this.content = baseStr.decode(this.resContent);
                    }
                }
            }
        });
    });

</script>
{/block}